<template>
    <div class="root">
        <div class="container">
            <div class="part">
                <p>请输入房间号</p>
                <input type="text" v-model="room" placeholder="如：15120">
            </div>
            <button>开始学习</button>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            room:''
        }
    }
}
</script>

<style lang="less" scoped>
    .root{
        width: 100%;
        height: 82.2%;
        background-color: rgb(247, 248, 252);
    }
    .container{
        width: 92%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        // background-color: royalblue;
        .part{
            width: 100%;
            p{
                color:rgb(82, 81, 112);
                text-align: center;
            }
            input{
                text-align: center;
                width: 100%;
                height: 38px;
                border-radius: 10px;
                padding-left: 10px;
                outline: none;
                border: none;
                margin-top: 15px;
            }
        }
        button{
            width: 100%;
            height: 45px;
            margin-top: 20px;
            background-color: rgb(78, 147, 242);
            border-radius: 10px;
            border:none;
            outline: none;
            color: white;
            font-size: 16px;
            letter-spacing: 1px;
        }
    }
</style>
